<template>
  <div>
    <searchvideo :video="video" />
    <!-- 分页 -->
    <div v-if="video!==''" class="next">
      <el-pagination :hide-on-single-page="true" @current-change="change" background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import searchvideo from '@/components/searchvideo'
export default {
  name: 'videoc',
  data() {
    return {
      video: '',
      limit: 20,
      total:0
    }
  },
  components: {
    searchvideo,
  },
  methods: {
   async change(e){
       const { data: res } = await this.$http(`/cloudsearch?keywords=${this.$store.state.search.searchName}&type=1014&limit=${this.limit}&offset=${(e - 1)  * this.limit}`)
      if (res.code !== 200) return this.$message.error('暂无视频')
      this.video = res.result.videos
    },
    async getdata() {
      const { data: res } = await this.$http(
        `/cloudsearch?keywords=${this.$store.state.search.searchName}&type=1014&limit=${this.limit}`
      )
      if (res.code !== 200) return this.$message.error('暂无视频')
      this.total =  Number((res.result.videoCount / 20).toFixed(0) + '0')
      this.$store.commit('search/getsongCount', res.result.videoCount) //多少条歌曲传递到 vuex
      this.video = res.result.videos
    },
  },
  created() {
    this.getdata()
    this.$store.commit('search/getsearchlist', this.$route.meta.title)
  },
}
</script>

<style scoped>
.next{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>